<template>
	<div class="content-page">
		<div class="content-nav">
			<el-breadcrumb class="breadcrumb" separator="/">
				<el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>运营管理</el-breadcrumb-item>
				<el-breadcrumb-item>轮播管理</el-breadcrumb-item>
			</el-breadcrumb>
			<div class="operation-nav">
				<router-link to="/dashboard/operate/topic/add">
					<el-button type="primary" icon="plus">添加轮播</el-button>
				</router-link>
			</div>
		</div>
		<div class="content-main">
			<div class="filter-box">
				<el-form :inline="true" :model="filterForm" class="demo-form-inline">
					<el-form-item label="轮播名称">
						<el-input v-model="filterForm.bannerName" placeholder="轮播名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmitFilter">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="form-table-box">
				<el-table ref="multipleTable" :data="tableData" style="width: 100%" border stripe @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="bannerId" label="ID">
					</el-table-column>
					<el-table-column prop="bannerName" label="轮播名称">

					</el-table-column>
					<el-table-column label="轮播图" width="120">
						<template scope="scope">
							<el-image style="width: 100px; height: 100px" :src="scope.row.bannerImage" fit="contain" :preview-src-list="scope.row.previewSrc">
							</el-image>
						</template>
					</el-table-column>
					<el-table-column label="跳转类型">
						<template scope="scope">
							{{scope.row.forwardType==1?'视频':'链接'}}
						</template>
					</el-table-column>
					<el-table-column label="状态">
						<template scope="scope">
							{{scope.row.status==1?'启用':'关闭'}}
						</template>
					</el-table-column>
					<el-table-column prop="sorting" label="排序">
					
					</el-table-column>
					<el-table-column label="操作" width="250">
						<template scope="scope">
							<el-button size="small" @click="handleRowEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="small" type="danger" @click="handleRowDelete(scope.row.bannerId)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="page-box flex">
				<div class="page-box-l">
					<el-button @click="toggleSelection(1)">批量删除</el-button>
					<el-button @click="toggleSelection(2)">取消选择</el-button>
				</div>
				<div class="flex-1">
					<el-pagination @current-change="handlePageChange" :current-page="page" :page-size="20" layout="total, prev, pager, next, jumper"
					 :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getBannerList,
		delBanner
	} from '@/api/permission'
	export default {
		data() {
			return {
				page: 0,
				total: 0,
				filterForm: {
					bannerName: ''
				},
				tableData: [],
				multipleSelection: []
			}
		},
		methods: {
			handlePageChange(val) {
				this.page = val-1
				this.getList()
			},
			handleRowEdit(index, row) {
				this.$router.push({
					name: 'topic_add',
					params: {
						data: JSON.stringify(row)
					}
				})
			},
			handleRowDelete(categoryIdLists) {
				this.$confirm('确定要删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					delBanner({
						bannerId: categoryIdLists
					}).then((response) => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.page = 0
						this.getList();
					})
				});
			},
			onSubmitFilter() {
				this.page = 0
				this.getList()
			},
			getList() {
				getBannerList({
					index: this.page,
					bannerName: this.filterForm.bannerName,
					size: 20
				}).then((response) => {
					if(response.content.length){
						response.content.forEach(item=>{
							item[`previewSrc`] = new Array(item.bannerImage)
						})
					}
					this.tableData = response.content
					this.page = response.currentPage + 1
					this.total = response.totalRecords
				})
			},
			toggleSelection(type) {
				let rows = this.multipleSelection
				if (type==1&&rows.length) {
					let categoryIdLists = ''
					rows.forEach(row => {
						if (row) {
							categoryIdLists = categoryIdLists + row.bannerId + ','
						}
					});
					this.handleRowDelete(categoryIdLists)
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			}
		},
		components: {

		},
		mounted() {
			this.getList();
		}
	}
</script>

<style scoped>

</style>
